<template>

  <div class="main-content">
    <form v-form
          name="myform"
          @submit.prevent="checkCustomerPremises"
          role="form">
      <div class="information-form">
        <h3>客户基本信息</h3>
        <ul class="premises-details">
          <li class="col-sm-12 col-md-6">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px">意向楼盘：</label>
              <div class="control-details clearfix">
                <div class="det-title">{{premises.name}}</div>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px">最短报备时间：</label>
              <div class="control-details clearfix">
                <div class="det-title">
                  <span class="show-time"
                        v-if="premises.specialTimeType && premises.specialTimeType != 4">提前{{setProtectTime(premises.specialTime,premises.specialTimeType)}}</span>
                  <span class="show-time"
                        v-else>--</span>
                </div>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px"><span class="required">*</span>姓名：</label>
              <div class="control-details">
                <input type="text"
                       class="form-control"
                       placeholder="请输入姓名"
                       v-model="cList[0].name" />
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px">到访延长时间：</label>
              <div class="control-details clearfix">
                <div class="det-title">
                  <span class="show-time"
                        v-if="premises.visitProtectType && premises.visitProtectType != 4">{{setProtectTime(premises.visitProtect,premises.visitProtectType)}}</span>
                  <span class="show-time"
                        v-else>--</span>
                </div>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6"
              style="margin-bottom: 0;">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px"><span class="required">*</span>手机：</label>
              <div class="control-details">
                <input type="text"
                       class="form-control"
                       placeholder="请输入手机号"
                       v-if="!isShow"
                       v-model="cList[0].mobile"
                       @change="checkPhone" />
                <div class="hideReport"
                     v-if="isShow"
                     :class="{'active':isChecked}">
                  <div class="digital-input">
                    <div class="digital-input-item">{{ userTel.numA }}</div>
                    <div class="digital-input-item">{{ userTel.numB }}</div>
                    <div class="digital-input-item" v-show="premises.reportWay === '0' || premises.reportWay ==='2' || premises.reportWay === '3' || premises.reportWay === '4' || premises.reportWay === '6'">{{ userTel.numC }}</div>
                    <div class="digital-input-item" v-show="premises.reportWay === '3' || premises.reportWay === '6'">{{ userTel.numD }}</div>
                    <div class="digital-input-item" v-for="index of starCount"><i class="fa fa-asterisk"></i></div>
                    <div class="digital-input-item" v-show="premises.reportWay ==='5'">{{ userTel.numC }}</div>
                    <div class="digital-input-item" v-show="premises.reportWay ==='0' || premises.reportWay ==='2' || premises.reportWay ==='4' || premises.reportWay ==='5'">{{ userTel.numD }}</div>
                    <div class="digital-input-item">{{ userTel.numE }}</div>
                    <div class="digital-input-item">{{ userTel.numF }}</div>
                    <div class="digital-input-item">{{ userTel.numG }}</div>
                    <div class="digital-input-item" v-show="premises.reportWay ==='4' || premises.reportWay ==='5' || premises.reportWay ==='6'">{{ userTel.numH }}</div>
                  </div>
                  <input type="tel"
                         :maxlength="11-starCount"
                         class="thisNumber"
                         @focus="obtainState"
                         @blur="noState"
                         v-model="helfTel">
                </div>
                <a class="reportBtn"
                   href="javascript:;"
                   v-if="isShow && premises.reportWay === '0'"
                   @click="isShow = !isShow"><i class="fa fa-eye"></i>全号报备</a>
                <a class="reportBtn"
                   href="javascript:;"
                   v-if="!isShow && premises.reportWay === '0'"
                   @click="isShow = !isShow"><i class="fa fa-eye-slash"></i>隐号报备</a>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6"
              style="height: 62px;margin-bottom: 0;"
              v-if="premises.reportProtectType && premises.reportProtectType != 4">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px">报备保护时间：</label>
              <div class="control-details clearfix"
                   style="overflow: visible;">
                <div class="det-title"
                     style="overflow: visible;">
                  <span class="show-time">{{reportProtectMsg}}</span>
                  <span style="position: relative;">
                    <span v-if="reportProtectTipImgFlag"
                          @click="reportProtectTip(1)"><i class="fa fa-exclamation-circle warning-icon"></i></span>
                    <div class="reportProtectTip"
                         v-if="reportProtectTipFlag">
                      <span class="reportProtectTipContent"
                            v-if="currentTip == '1'">
                        <span class="redColor"
                              style="font-size: 20px;font-weight: bold;">注意！</span><br />
                        该客户在此楼盘下<br />
                        存在<span class="redColor">{{reportProtectObj.count}}次</span>报备逾期未到访的记录<br />
                        可能是您或您的同事未进行有效跟进<br />
                        因此本次报备保护时间将缩短至<span class="redColor">{{reportProtectObj.msg}}</span><br />
                        超过期限后，将允许其他经纪人报备<br />
                        请及时跟进带看<br />
                        避免再次逾期未到访
                      </span>
                      <span class="reportProtectTipContent"
                            v-if="currentTip == '2'">
                        <span class="redColor"
                              style="font-size: 20px;font-weight: bold;">注意！</span><br />
                        该客户在此楼盘下<br />
                        存在<span class="redColor">{{reportProtectObj.count}}次</span>报备逾期未到访的记录<br />
                        可能是您或您的同事未进行有效跟进<br />
                        因此本次报备<span class="redColor">{{reportProtectObj.msg}}</span><br />
                        将允许其他经纪人报备或带看<br />
                        请及时跟进带看
                      </span>
                      <span class="reportProtectTipContent"
                            v-if="currentTip == '3'">
                        <span class="redColor"
                              style="font-size: 20px;font-weight: bold;">注意！</span><br />
                        该客户在此楼盘下<br />
                        存在<span class="redColor">{{reportProtectObj.count}}次</span>报备逾期未到访的记录<br />
                        可能是您或您的同事未进行有效跟进<br />
                        因此本次已<span class="redColor">{{reportProtectObj.msg}}</span><br />
                        请联系管理员处理
                      </span>
                      <span class="reportProtectTipContent"
                            v-if="currentTip == '4'">
                        <span class="redColor"
                              style="font-size: 20px;font-weight: bold;">注意！</span><br />
                        该客户在此楼盘下<br />
                        存在<span class="redColor">{{reportProtectObj.count}}次</span>到访逾期未交易的记录<br />
                        可能是您或您的同事未进行有效跟进<br />
                        因此本次报备保护时间将缩短至<span class="redColor">{{reportProtectObj.msg}}</span><br />
                        超过期限后，将允许其他经纪人报备<br />
                        请及时跟进业务<br />
                        避免再次逾期未交易
                      </span>
                      <span class="reportProtectTipContent"
                            v-if="currentTip == '5'">
                        <span class="redColor"
                              style="font-size: 20px;font-weight: bold;">注意！</span><br />
                        该客户在此楼盘下<br />
                        存在<span class="redColor">{{reportProtectObj.count}}次</span>到访逾期未交易的记录<br />
                        可能是您或您的同事未进行有效跟进<br />
                        因此本次报备<span class="redColor">{{reportProtectObj.msg}}</span><br />
                        将允许其他经纪人报备或带看<br />
                        请及时跟进带看
                      </span>
                      <div class="tipBtn"
                           @click="reportProtectTip(2)">好的</div>
                    </div>
                  </span>
                </div>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6"
              v-else-if="visitTimeStatus && visitTimeStatus != 0">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px"><span v-if="visitTimeStatus == 1"
                      class="required">*</span>期望带看时间：</label>
              <div style="padding-left: 20px; text-overflow:ellipsis;position: relative;">
                <calendar theme="#F87242"
                          type='time'
                          :visitTimeShow="visitTimeStatus == 2 ? false : true"
                          inputwidth="210px"></calendar>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6"
              v-if="recommenderStatus && recommenderStatus != 0">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px"><span v-if="recommenderStatus == 1"
                      class="required">*</span>报备推荐人：</label>
              <div style="height: 1px;padding-left: 22px;">
                <recommend-select :premises-id="params.premisesId"
                                  v-model="params.recommenderUuid" />
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px">
                <span class="required">*</span>性别：</label>
              <div class="control-details">
                <div class="radio">
                  <label>
                    <input type="radio"
                           value="0"
                           name="sex"
                           v-model="cList[0].gender">男
                  </label>
                  <label>
                    <input type="radio"
                           value="1"
                           name="sex"
                           v-model="cList[0].gender">女
                  </label>
                </div>
              </div>
            </div>
          </li>
          <li class="col-sm-12 col-md-6"
              v-if="premises.reportProtectType && premises.reportProtectType != 4 && visitTimeStatus && visitTimeStatus != 0">
            <div class="list-info-template">
              <label class="control-label"
                     style="width:110px"><span v-if="visitTimeStatus == 1"
                      class="required">*</span>期望带看时间：</label>
              <div style="padding-left: 20px; text-overflow:ellipsis;position: relative;">
                <calendar theme="#F87242"
                          type='time'
                          :visitTimeShow="visitTimeStatus == 2 ? false : true"
                          inputwidth="210px"></calendar>
              </div>
            </div>
          </li>
          <li class="col-sm-12">
            <div class="list-info-template">
              <label class="control-label"
                     for=""><span class="required">*</span>备注：</label>
              <div class="control-details">
                <textarea class="form-control"
                          rows="4"
                          v-model="params.remark"></textarea>
              </div>
            </div>
          </li>
        </ul>
        <h3 v-if="reportModelList !=null &&reportModelList.length>0">自定义报备信息</h3>
        <ul class="premises-details">
          <li v-if="customerMode"
              v-for="(r, index) in reportModelList"
              :key="index"
              class="col-sm-12 col-md-6">
            <div class="list-info-template">
              <label class="control-label"
                     for="">{{r.modelColumn}}：</label>
              <div class="control-details">
                <input type="text"
                       class="form-control"
                       :placeholder="r.modelColumn"
                       v-model="r.content" />
              </div>
            </div>
          </li>
        </ul>
        <button class="btn btn-theme btn-tj"
                type="submit"
                v-show="btnShow">提交</button>
      </div>
    </form>
  </div>
</template>
<script>
import CustomerStatus from "../common/customerStatusComponents.vue";
import calendar from "../common/calendar.vue";
import RecommendSelect from "../declare/components/RecommendSelect.vue";
export default {
  components: {
    RecommendSelect
  },
  data() {
    return {
      recommenderCheck: false,
      visitTimeStatus: "",
      recommenderStatus: "",
      modalShow: "",
      myform: {},
      premises: {
        name: ""
      },
      params: {
        staffId: window.localStorage.getItem("4_userId"),
        premisesId: this.$route.params.premisesId,
        reportType: "1",
        visitProtectDate: "",
        reportModelList: [],
        recommenderUuid: null
      },
      cList: [
        {
          name: "",
          mobile: "",
          gender: "",
          email: "",
          special: "",
          coords: "",
          visitProtectDate: ""
        }
      ],
      btnShow: true,
      isShow: false,
      isChecked: false,
      starCount: 0,
      helfTel: "",
      visitProtectCalendar: "",
      dateTime: "",
      reportModelList: [],
      customerMode: false,
      reportProtectTipImgFlag: false,
      reportProtectTipFlag: false,
      reportProtectObj: null,
      currentTip: 0,
      reportProtectMsg: ""
    };
  },
  computed: {
    userTel() {
      let numA, numB, numC, numD, numE, numF, numG, numH;
      if (this.helfTel.length > 0) {
        numA = this.helfTel.substring(0, 1);
        numB = this.helfTel.substring(1, 2);
        numC = this.helfTel.substring(2, 3);
        numD = this.helfTel.substring(3, 4);
        numE = this.helfTel.substring(4, 5);
        numF = this.helfTel.substring(5, 6);
        numG = this.helfTel.substring(6, 7);
        numH = this.helfTel.substring(7, 8);
      }
      return {
        numA, numB, numC, numD,
        numE, numF, numG, numH
      };
    }
  },
  mounted: function () {
    //初始化
    this.findPremisesInfo();
    this.getModelList();
    this.getDefaultModelList();
  },
  components: {
    RecommendSelect,
    CustomerStatus,
    calendar
  },
  methods: {
    checkPhone() {
      let _self = this;
      if (!/^\d{11}$/.test(_self.cList[0].mobile)) {
        layer.msg("请输入正确的号码", {
          time: 2000
        });
        return false;
      }
      _self.checkReportProtectConfig();
    },
    reportProtectTip(type) {
      if (type == 1) {
        if (this.reportProtectObj && this.reportProtectObj.code == "6") {
          layer.msg("该客户在此楼盘下已存在有效报备无法再次进行报备");
          return;
        }
        this.reportProtectTipFlag = true;
      } else {
        this.reportProtectTipFlag = false;
      }
    },
    checkReportProtectConfig() {
      var _self = this;
      var body = {};
      body.params = {
        premisesId: this.$route.params.premisesId,
        cusPhoneList: [_self.cList[0].mobile]
      };
      var url = _self.utilHelper.apiUrl + "/api/checkReportProtect";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        var resData = body.resData;
        if (body.result == 1) {
          if (resData.list && resData.list.length > 0) {
            this.reportProtectObj = resData.list[0];
            this.currentTip = this.reportProtectObj.code;
            this.reportProtectTipImgFlag = true;
            _self.reportProtectMsg = resData.list[0].msg;
          } else {
            this.reportProtectTipImgFlag = false;
          }
        } else {
          this.reportProtectTipImgFlag = false;
          layer.msg("报备保护时间校验失败");
        }
      });
    },
    //楼盘信息
    findPremisesInfo: function () {
      var _self = this;
      var params = {
        id: _self.$route.params.premisesId
      };
      var body = {};
      body.params = params;
      var url = this.utilHelper.apiUrl + "/api/getPremisesDetail";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.premises = resData.detailResDto;
          if (!_self.premises.reportWay || _self.premises.reportWay === "0") {
            _self.premises.reportWay = "0";
            this.starCount = 4;
          } else if (_self.premises.reportWay === "1") {
            this.isShow = false;
          } else if (_self.premises.reportWay === "2" || _self.premises.reportWay === "3") {
            this.isShow = true;
            this.starCount = 4;
          } else if (_self.premises.reportWay === "4" || _self.premises.reportWay === "5" || _self.premises.reportWay === "6") {
            this.isShow = true;
            this.starCount = 3;
          }
          if (_self.premises.reportProtectType == "1") {
            _self.reportProtectMsg = _self.premises.reportProtect / 1440 + "天";
          } else if (_self.premises.reportProtectType == "2") {
            _self.reportProtectMsg = _self.premises.reportProtect / 60 + "小时";
          } else if (_self.premises.reportProtectType == "3") {
            _self.reportProtectMsg = _self.premises.reportProtect + "分钟";
          }
          if (
            _self.premises.premisesRecommenderList &&
            _self.premises.premisesRecommenderList.length > 0
          ) {
            _self.recommenderCheck = true;
          } else {
            _self.recommenderCheck = false;
          }
        }
      });
    },
    isInSpecialTime: function () {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/isInSpecialTime";
      var body = {};
      body.params = {
        hopeTime: _self.cList[0].visitProtectDate,
        premisesId: _self.params.premisesId
      };
      _self.$http.post(url, body).then((response) => {
        var data = response.body.resData;
        var time = data.specialTime;
        var msg = data.msg;
        var saveDays = data.saveDays;
        if (data.result == 1) {
          if (msg == "1") {
            //特殊报备
            layer.msg("特殊报备请到移动端");
            _self.btnShow = true;
          } else if (msg == "2") {
            _self.saveCustomerPremises();
          } else if (msg == "3") {
            _self.btnShow = true;
            layer.alert("您选择的时间必须大于系统当前时间");
          } else if (msg == "4") {
            layer.confirm(
              "本楼盘的到访延长时间为" +
                saveDays +
                "分钟，从报备之时起" +
                saveDays +
                "分钟内未到访，需要重新报备，您的期望带看时间已超过了到访延长时间",
              {
                btn: ["修改带看时间", "没关系，届时再报备"], //按钮
                shade: false //不显示遮罩
              },
              function () {
                layer.closeAll();
                _self.btnShow = true;
              },
              function () {
                _self.saveCustomerPremises();
                layer.closeAll();
              }
            );
          }
        } else {
          layer.msg(data.resultMsg);
          _self.btnShow = true;
        }
      });
    },
    checkCustomerPremises: function () {
      var _self = this;
      if (_self.cusPreValidate()) {
        if (_self.visitTimeStatus !== 0 && _self.cList[0].visitProtectDate) {
          _self.isInSpecialTime();
        } else {
          _self.saveCustomerPremises();
        }
      }
    },
    saveCustomerPremises: function () {
      var _self = this;
      var url = _self.utilHelper.apiUrl + "/api/addReport";
      _self.btnShow = false;
      _self.params.customerList = JSON.parse(JSON.stringify(_self.cList));
      var modelList = [];
      //报备模板列表
      for (var r in _self.reportModelList) {
        if (!_self.reportModelList[r].content) {
          layer.msg("请填写" + _self.reportModelList[r].modelColumn);
          _self.btnShow = true;
          return;
        }
        modelList.push({
          modelId: _self.reportModelList[r].id,
          modelColumn: _self.reportModelList[r].modelColumn,
          content: _self.reportModelList[r].content
        });
      }
      _self.params.reportModelList = modelList;

      var body = {};
      body.params = _self.params;
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          var returnMsg = JSON.parse(resData.resultMsg);
          var successCount = returnMsg.successCount;
          var failCount = returnMsg.failCount;
          var failMsg = returnMsg.failMsg;
          if (failCount == 0 && successCount > 0) {
            layer.msg(
              "提交成功",
              {
                time: 2000
              },
              function () {
                _self.$router.replace({
                  path: "/premises"
                });
              }
            );
          } else {
            layer.msg(failMsg);
            _self.btnShow = true;
          }
          // 2代表后台的重复点击
        } else if (resData.result != "2") {
          layer.msg("报备失败");
          _self.btnShow = true;
        }
      });
    },
    cusPreValidate() {
      var _self = this;
      var gender = _self.cList[0].gender;
      var name = _self.cList[0].name;
      var mobile = _self.cList[0].mobile;
      var remark = _self.params.remark;
      var recommenderUuid = _self.params.recommenderUuid;

      //判断是否隐号
      if (_self.isShow == true) {
        let threeStars = "***"
        let fourStars = "****";
        let reportWay = _self.premises.reportWay;
        var numA, numB, needStars;
        if(reportWay === '0' || reportWay === '2' || reportWay === '4'){
          numA = _self.helfTel.substring(0, 3);
          numB = _self.helfTel.substring(3);
          needStars = fourStars;
          if(reportWay === '4'){
            needStars = threeStars;
          }
        }else if(reportWay === '3' || reportWay === '6'){
          numA = _self.helfTel.substring(0, 4);
          numB = _self.helfTel.substring(4);
          needStars = fourStars;
          if(reportWay === '6'){
            needStars = threeStars;
          }
        }else if(reportWay === '5'){
          numA = _self.helfTel.substring(0, 2);
          numB = _self.helfTel.substring(2);
          needStars = threeStars;
        }
        var numReg = new RegExp("^[0-9]*$");
        if (!numReg.test(numA) || !numReg.test(numB)) {
          layer.msg("请输入正确的号码", {
            time: 2000
          });
          return false;
        }
        _self.cList[0].mobile = numA + needStars + numB;
      } else {
        if (!/^\d{11}$/.test(_self.cList[0].mobile)) {
          layer.msg("请输入正确的号码", {
            time: 2000
          });
          return false;
        }
      }

      var dateTime = $("#dateTime").text(); //获取期望带看时间
      if (_self.visitTimeStatus == 1 && dateTime == "") {
        layer.msg("请选择期望带看时间", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      if (_self.visitTimeStatus == 0 || dateTime == "") {
        dateTime = "";
        _self.cList[0].visitProtectDate = "";
        _self.params.visitProtectDate = "";
      } else {
        _self.cList[0].visitProtectDate = dateTime + ":00";
        _self.params.visitProtectDate = dateTime + ":00";
      }
      if (!gender) {
        layer.msg("请选择性别", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      if (!name) {
        layer.msg("请填写姓名", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      if (
        _self.recommenderStatus == 1 &&
        _self.recommenderCheck &&
        recommenderUuid === null
      ) {
        layer.msg("请选择报备推荐人", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      if (!remark) {
        layer.msg("请填写备注", {
          time: 2000
        });
        _self.btnShow = true;
        return false;
      }
      return true;
    },
    obtainState() {
      this.isChecked = true;
    },
    noState() {
      this.isChecked = false;
    },
    getModelList() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getReportModelList";
      var body = {};
      body.params = {
        premisesId: _self.$route.params.premisesId,
        modelType: 2
      };
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          _self.reportModelList = body.resData.list;
          if (_self.reportModelList.length > 0) {
            _self.customerMode = true;
          }
        } else {
          layer.msg("获取报备模板失败");
        }
      });
    },
    getDefaultModelList() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getReportModelList";
      var body = {};
      body.params = {
        premisesId: _self.$route.params.premisesId,
        modelType: 1
      };
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          var reportDefaultModelList = body.resData.list;
          if (reportDefaultModelList.length > 0) {
            for (var r in reportDefaultModelList) {
              if (reportDefaultModelList[r].modelColumn === "预计到访时间") {
                _self.visitTimeStatus = reportDefaultModelList[r].showFlag;
              }
              if (reportDefaultModelList[r].modelColumn === "报备推荐人") {
                _self.recommenderStatus = reportDefaultModelList[r].showFlag;
              }
            }
          }
        } else {
          layer.msg("获取报备模板失败");
        }
      });
    },
    setProtectTime(time, type) {
      if (type == "1") {
        return time / 1440 + "天";
      } else if (type == "2") {
        return time / 60 + "小时";
      } else if (type == "3") {
        return time + "分钟";
      }
      return "";
    }
  }
};
</script>
<style scoped>
.redColor {
  color: #ff5e5e;
}
.reportBtn {
  display: block;
  color: #eb6100;
  font-size: 16px;
  margin-top: 6px;
}
.reportBtn .fa {
  font-size: 20px;
  margin-right: 6px;
}
.hideReport {
  display: block;
  height: 28px;
  width: 198px;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: relative;
}
.hideReport.active {
  border: 1px solid #eb6100;
}
.digital-input {
  overflow: hidden;
  width: 100%;
  z-index: 10;
  position: relative;
}
.digital-input .digital-input-item {
  height: 26px;
  float: left;
  width: 9.09%;
  border-right: 1px dashed #d8d8d8;
  text-align: center;
  line-height: 26px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.digital-input-item .fa {
  font-size: 12px;
  color: #999;
}
.hideReport.active .digital-input-item {
  border-right: 1px dashed #eb6100;
}
.thisNumber {
  position: absolute;
  width: 198px;
  height: 26px;
  top: 0;
  left: 0;
  z-index: 99;
  opacity: 0;
}
.show-time {
  color: #eb6100;
}
.reportProtectTip {
  position: absolute;
  z-index: 999;
  top: 30px;
  left: 10px;
  width: 250px;
  height: 300px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 10px;
  background: #fff;
  font-size: 14px;
}
.reportProtectTip .tipBtn {
  width: 230px;
  height: 33px;
  line-height: 33px;
  background: #ff5e5e;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  margin-top: 20px;
  position: absolute;
  bottom: 10px;
}
.warning-icon {
  font-size: 20px;
  color: #ff5e5e;
}
</style>
